<template>
  <div class="min-h-full">
    <h1 class="my-4 px-4 text-4xl font-semibold">我的文章</h1>

    <div class="flex items-center justify-between gap-2 px-4">
      <div class="flex items-center gap-2">
        <div class="flex items-center gap-2">
          <label for="start_date">开始日期</label>
          <ZInput
            id="start_date"
            type="date"
            v-model="startDate"
            data-tip="开始日期"
          />
        </div>
        <div class="flex items-center gap-2">
          <label for="end_date">结束日期</label>
          <ZInput
            id="end_date"
            type="date"
            v-model="endDate"
            data-tip="结束日期"
          />
        </div>
      </div>
      <div class="flex items-center gap-2">
        <label for="order_field">排序</label>
        <ZSelect
          id="order_field"
          v-model="orderField"
          :options="orderFields"
          data-tip="排序"
        />
        <ZSwap
          v-model="asc"
          data-tip="升序"
          on-icon="icon-[uil--sort-amount-up]"
          off-icon="icon-[uil--sort-amount-down]"
        ></ZSwap>
      </div>
    </div>
    <div class="grid min-h-[20rem] gap-4 p-4 md:grid-cols-2 lg:grid-cols-3">
      <ZCard
        class="cursor-pointer border-2 hover:shadow-md"
        v-for="post in data?.query.results"
        :key="post.id"
        @click="
          () => $router.push({ name: 'my.edit-post', params: { id: post.id } })
        "
      >
        <template #header>
          <img
            class="h-full min-h-[8rem] w-full object-cover"
            :src="post.cover"
            alt="cover"
          />
        </template>
        <h3
          class="overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold"
        >
          {{ post.title }}
        </h3>
        <p class="line-clamp-2 h-12 text-base text-base-content/60">
          {{ post.digest }}
        </p>
      </ZCard>
    </div>
    <div class="flex justify-end px-4">
      <ZPagination
        :total="total"
        v-model:page="page"
        v-model:page-size="pageSize"
        :buttons="['first', 'last']"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import ZSelect from "@/components/forms/ZSelect.vue";
import { useApiFetch, ApiResponse } from "@/composables/useApiFetch";
import { Post } from "@/stores/types";
import { useUrlParams } from "@/composables/useUrlParams";
import ZSwap from "@/components/forms/ZSwap.vue";
import ZInput from "@/components/forms/ZInput.vue";
// import { useTagsStore } from "@/stores/tags";

// const tagsStore = useTagsStore();

const page = ref(1),
  pageSize = ref(6),
  total = ref(0);
// 时间范围
const startDate = ref(""),
  endDate = ref("");
// 标签
const tags = ref<number[]>([]);
// 排序字段
const orderField = ref("createdAt"),
  asc = ref(true);
const params = computed(() => ({
  start_date: startDate.value,
  end_date: endDate.value,
  tags: tags.value,
  orderby: `${asc.value ? "" : "-"}${orderField.value}`,
  offset: (page.value - 1) * pageSize.value,
  limit: pageSize.value,
}));
const urlParams = useUrlParams(params);
const orderFields = {
  createdAt: "时间",
  hits: "浏览量",
};

const url = computed(() => `/user/posts?${urlParams.value}`);
// 获取用户博客信息
const { data, execute } = useApiFetch(url, {
  refetch: true,
}).json<ApiResponse<Post>>();

watch(data, () => {
  if (data.value?.success) {
    total.value = data.value.query.count;
  }
});

onActivated(() => {
  execute();
});
</script>
